import React from 'react';
import { Card, Descriptions, Typography, Avatar, Tag, Button, Space, Divider } from 'antd';
import { UserOutlined, MailOutlined, PhoneOutlined, TeamOutlined, LogoutOutlined, SafetyOutlined } from '@ant-design/icons';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { logout } from '../../store/slices/userSlice';
import type { RootState, AppDispatch } from '../../store';
import './Profile.css'
const { Title, Text } = Typography;

export const Profile: React.FC = () => {
  const dispatch = useDispatch<AppDispatch>();
  const navigate = useNavigate();
  const { user } = useSelector((state: RootState) => state.user);

  const handleLogout = () => {
    dispatch(logout());
    navigate('/login');
  };

  return (
    <div>
      <Title level={2}>个人资料</Title>

      <Card>
        <div style={{ display: 'flex', alignItems: 'center', gap: '24px', marginBottom: '24px' }}>
          <Avatar size={80} icon={<UserOutlined />} />
          <div style={{ flex: 1 }}>
            <Title level={3} style={{ margin: 0 }}>{user?.username || '管理员'}</Title>
            <Tag color="blue" style={{ marginTop: '8px' }}>
              {user?.role === 'admin' ? '系统管理员' : '普通用户'}
            </Tag>
          </div>
          <Button
            type="primary"
            danger
            icon={<LogoutOutlined />}
            onClick={handleLogout}
          >
            退出登录
          </Button>
        </div>

        <Descriptions bordered column={1}>
          <Descriptions.Item label="姓名">
            <div style={{ textAlign: 'left' }}>{user?.username || '管理员'}</div>
          </Descriptions.Item>
          <Descriptions.Item label="工号">
            <div style={{ textAlign: 'left' }}> {user?.id ? `USER${user.id.toString().padStart(3, '0')}` : 'ADMIN001'}</div>
          </Descriptions.Item>
          <Descriptions.Item label="邮箱">
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <MailOutlined />
              {user?.email || 'admin@lab.edu.cn'}
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="电话">
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <PhoneOutlined />
              {user?.phone || '13800138000'}
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="部门">
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <TeamOutlined />
              {user?.department || '实验室管理中心'}
            </div>
          </Descriptions.Item>
          <Descriptions.Item label="角色">
            <div style={{ textAlign: 'left' }}> {user?.role === 'admin' ? '系统管理员' : '普通用户'}</div>

          </Descriptions.Item>
          <Descriptions.Item label="账号状态">
            <div style={{ textAlign: 'left' }}>  <Tag color="green" >正常</Tag></div>

          </Descriptions.Item>
        </Descriptions>

        <Divider />

        {/* 安全设置区域 */}
        <div>
          <Title level={4}>
            <SafetyOutlined style={{ marginRight: 8 }} />
            安全设置
          </Title>
          <Space style={{ width: '100%' }}>
            <Button type="link" style={{ padding: 0, height: 'auto', marginInline: '120px' }}>
              修改密码
            </Button>
            <Button type="link" style={{ padding: 0, height: 'auto', marginInline: '120px' }}>
              安全日志
            </Button>
            <Button type="link" style={{ padding: 0, height: 'auto', marginInline: '80px' }}>
              登录设备管理
            </Button>
          </Space>
        </div>

        <Divider />

        {/* 退出登录按钮 - 底部备用 */}
        <div style={{ textAlign: 'center', marginTop: 24 }}>
          <Text type="secondary" style={{ marginRight: 16 }}>
            遇到问题？请联系系统管理员
          </Text>

        </div>
      </Card>
    </div>
  );
};

export default Profile;